<template>
  <div>
    <div class="bgwidth">
      <div class="bgImg">
        <div class="loginDiv">
          <div class="leftFloat">
            <span>医疗管理后台</span>
          </div>
          <div class="rightFloat">
            <div class="rightFloatDiv"><span>医生登录</span></div>
            <!-- 登录表单 -->
            <el-form
              :inline="true"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="formpadding demo-form-inline"
            >
              <el-form-item prop="phone" class="inputWidth">
                <el-input
                  type="text"
                  placeholder="18006942250"
                  v-model="ruleForm.phone"
                  prefix-icon="el-icon-s-custom"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="button" class="buttonMargin" @click="getCode"
                  >获取验证码</el-button
                >
              </el-form-item>
              <el-form-item prop="code" class="inputWidth marign-top">
                <el-input
                  placeholder="请输入验证码"
                  v-model="ruleForm.code"
                  show-password
                  prefix-icon="el-icon-unlock"
                  class="radius"
                ></el-input>
              </el-form-item>
              <div class="buttoncss">
                <el-button type="button" plain @click="loginIndex('ruleForm')"
                  >登录</el-button
                >
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        phone: "18006942250",
        code: "",
      },
      rules: {
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确手机号码", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    getCode() {
      this.$axios
        .get("/shiro/getCode", {
          params: {
            phone: this.ruleForm.phone,
          },
        })
        .then((response) => {
          console.log(response);
          this.$notify({
            title: "验证码",
            message: "您本次操作的验证码是:" + response.result,
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    loginIndex(formName) {// 登录接口对接
       this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm);

          this.$axios
            .post("/shiro/login",this.ruleForm)
            .then( (response) =>{ // 存登录状态
              // console.log(response);
               sessionStorage.setItem("login",true)
                

              if(response.suc){
                   this.$router.push({path:'/index'})
              }
            })
            .catch( (error)=> {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bgImg {
     width: 100%;
    height: 100vh;
    background: url(../assets/img/bglogin.png) no-repeat;
  // background-image: url("") no-repeat;
  .loginDiv {
    position: relative;
    float: right;
    right: 0;
    width: 1000px;
    height: 720px;
    .leftFloat {
      width: 300px;
      height: 105px;
      float: left;
      background: #16dcb8;
      z-index: 9999;
      transform: skewX(-25deg);
      span {
        display: inline-block;
        color: #ffffff;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
        transform: skewX(25deg);
      }
    }
  }
}
.rightFloat {
  position: absolute;
  margin-bottom: 0;
  clear: both;
  bottom: 0;
  right: 0;
  width: 350px;
  height: 400px;
  text-align: initial;
  .rightFloatDiv {
    padding: 18px;
  }
  span {
    display: inline-block;
    width: 90px;
    padding-bottom: 18px;
    font-size: 18px;
    color: #2dc6e1;
    font-family: MicrosoftYaHei;
    border-bottom: 1px solid #2dc6e1;
  }
  .formpadding {
    padding: 0 18px;
    .marign-top {
      margin-top: 0;
    }
    .buttonMargin {
      border: 0;
      color: #cbcbcb;
      background: #f2f3f7;
      margin-top: 30px;
      width: 110px;
    }
  }
}
.inputWidth {
  width: 180px;
  margin-top: 30px;
  .radius {
    border-radius: 10px;
  }
}
.buttoncss {
  width: 100%;
  button {
    width: 180px;
    color: #ffffff;
    background-image: linear-gradient(to right, #2dc6e1, #14dfba);
  }
}
</style>